<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery事件处理on绑定一个或多个事件</title>
    <script src="../jquery/jquery.v3.7.1.js"></script>
    <style>
        div {
            color: white;
            background-color: green;
        }

        .click-div {
            background-color: red;
        }
    </style>
    </style>
</head>

<body>
    <div>
        <p>on()：在匹配元素上绑定一个或多个事件的事件处理函数。</p>
        <p>语法：element.on(events,[selector],fn)</p>
        <p>1、events：一个或多个用空格分隔的事件类型，如：click、keydown。以对象的形式绑定多个事件，每个事件使用逗号分隔开。</p>
        <p>2、selector：元素的子元素选择器。</p>
        <p>on() 方法实现事件委派操作。事件委派的定义就是，把原来加给元素身上的事件绑定在父元素身上，就是把事件委派给父元素。</p>
    </div>
    <script>
        $(function () {
            //单个事件注册
            // $('div').click(function () {
            //     $(this).addClass('click-div');
            // });
            // $('div').mouseenter(function(){
            //     $(this).removeClass('click-div');
            // });
            //多个事件注册
                $('div').on({
                    mouseenter:function(){
                        $(this).removeClass('click-div');
                    },
                    click:function(){
                        $(this).addClass('click-div');
                    },
                    mouseleave:function(){
                        $(this).css({'background-color': 'aqua'})
                    }
                })
        })
    </script>
</body>

</html>